iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
1

在說明JavaScript之前,有幾點需要先瞭解的。

  1. JavaScript有大小寫之分,但HTML沒有大小寫之分,因為這樣的差異,某些地方要特別注意。

  2. 註解方式:

    • 單行: //...
    • 多行: /* ... */
  3. 分號(;)
    在JavaScript裡有時不加分號(;),程式執行起來都OK,有時卻會跳錯誤。
    如果換行之後,JavaScript有辦法解析那會將語法接續下去,反之,會把換行替換成分號(;)

    var j 
    j
    = 
    3
    console.log(j)
    

    JavaScript會解讀成
    var j; j=3; console.log(j);

    再來看下面這個例子

    var j = a + v
    (x+y).toString()
    

    JavaScript會解讀成
    var j = a+v(x+y).toString();
    上面這樣的寫法,應該不是原本code的原意。
    所以在coding時,還是要清楚的標示分號(;),才不會語意錯誤。

JavaScript型別

兩大類

  1. primitive type
    • number、string、boolean
    • null、undefined屬於primitive type但不屬於以上三種。(null,undefined無法invoke method)
  2. object type
    • 不屬於number、string、boolean、null、undefined皆為object。
    • 普通物件為無序群體
    • 陣列(Arry)為有序群體的物件
    • 函式(function)

JavaScript直譯器(interpreter)會自動執行垃圾回收(garbage collection),所以當程式無法reference到物件時,會自動回收記憶體空間。

number

整數
  • 以10為基底: -2^53 ~ 2^53()
  • 以16進位為基底: 以0X開頭。(0XFAE)
  • ECMAScript標準未支援8進制。
浮點數
  • 小數點
  • 使用指數(e或E)
    • 6.02e23 = 6.02 * 10^23
    • 6.02e-23 = 6.02 * 10^-23
  • method: toFixed()、toExponential()、toPrecision() (回傳的都是字串)
var num = 123456.789
// toFixed(n)小數點後面n位數
num.toFixed(2) //  "123456.78"
// toExponential(n)小數點前只會有一位,小數點後面n位數其他用指數呈現
num.toExponential(1) // "1.2e+5"
num.toExponential(3) // "1.235e+5"
// toPrecision(n) 呈現n有效值
num.toPrecision(7) // 123456.8 四捨五入
  • method: parseInt()、parseFloat()
parseInt("3 meters") // return 3
parseInt("3.14")   // return 3
parseFloat("3.14")   // return 3.14
parseInt("0xff")   // return 255
parseInt("$35")   // NaN : 起始不可為$

//parseInt可帶入第二個參數做為基數
parseInt("11",2)   // return 3 (2x1+1)
算術運算
  • 加減乘除
  • 運用Math運算
  • 如何判斷NaN ( NaN與任何數都不相等 )
    var a = NaN;
    a == NaN; // false
    a != a; //true
    
  • +0 與 -0 是相等的
  • Infinity 與 -Infinity 不相等

JavaScript中運算發生overflow、、?/0,不會產生任何錯誤會以 Infinity,-Infinity

JavaScript中運算發生underflow,主因為運算後結果非常接近0但以無法用最小可表式的數值表示(通常程式設計師不太需要檢測此項)

如果在 0/0 的情況,會回傳NaN(not a number)

Date
  • getMonth() 從0開始算起。
  • getDay()
    • 0: 星期日
    • 6: 星期六
var _date = new Date(2019,8,18,17,10,30) 

_date.getFullYear() // 2019
_date.getMonth() // 8 -> 要換算成9月
_date.getDate() // 18
_date.getDay() // 2 --> 要換算成星期三
_date.getHours() // 17 or 5pm
_date.getUTCHours() // 9 : 取決於時區(UTC+0)
_date.toString() // Wed Sep 18 2019 17:10:30 GMT+0800 (台北標準時間)
_date.toUTCString() // Wed, 18 Sep 2019 09:10:30 GMT
_date.toLocaleDateString() // 2019/9/18
_date.toLocaleTimeString() // 5:10:30 pm
_date.toISOString() // 2019-09-18T09:10:30.000Z
String
  • 16bit的不可變(immutable)有序序列。
  • 反斜線(backslash )跳脫字元。
  • 使用 + 來串接字串。
var str="Hello World";
str.length // "11"
str.charAt(1) // "e"
str.substring(1,4) // "ell"
str.slice(1,4) // "ell"
str.slice(-3) // "rld"
str.indexOf(e) // 1 : 第一個出現e的位置
str.lastIndexOf(l) // 9 : 最後一個出現e的位置
str.indexOf("l",4) // 9 : index=4 之後第一個"l"的位置
str.split("o") // ["Hell"," World"]
str.replace("W","w") // "Hello world"
str.toUpperCase() // "HELLO WORLD"

['I','am','superman'].join('-') // "I-am-superman"

JavaScript 是不可變序列,所以replace、toUpperCase()之類的都是回傳新字串
String可被視為唯獨的陣列。 str[0] // "H"

substring vs slice
  • 當start > end時
    • substring: 會將兩參數顛倒過來使用
    str.substring(5,2) // "ll0"
    // 等同
    str.substring(2,5) // "ll0"
    
    • slice: 會回空字串
    str.slice(5,2) // ""
    
  • 當參數為負數時
    • substring: 用0取代
    str.substring(-5,5) // "Hello"
    
    • slice:
    str.slice(-5,5) // ""
    
    // end 為負 ==>end 的計算方式 string.length – Math.abs(stop)
    str.slice(6,-2) // "Wor" 
    // 等同
    str.slice(5,9)  // str.slice(6,(11-2)) "Wor" 
    

參考出處: substring vs slice

boolean
  • true,false
  • undefined、null、0、-0,NaN、"" 以後都會被視為false

上一篇
Day 1: 前言
下一篇
Day 3: Datatypes and Values (Part 2)
系列文
Javascript 犀牛本-濃縮再濃縮 提煉再提煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言